Depth of Field Effects for Interactive Direct Volume Rendering
Idea and Implementation
The technical report of Schott et al. describes how they implemented a depth-of-field (DOF) effect for direct volume rendering. They describe DOF as the area of an image that is in focus. The motivation for implementing DOF they state is that the human visual system uses DOF to aid inferring absolute distances. DOF can be computed in a slice-based volume renderer system by modifying the traversal of the slices and the composition of a slice-based volume renderer, which renders proxy geometry. Those proxy geometry, also called view-aligned slices, are divided into two parts (Figure 3) . The first part are the slices in front of the focal plane (Front to Back) and the other slices are behind the focal plane (Back to Front). The results of both traversals are written into separate buffers and blended together afterwards. The traversing for DOF in comparison to normal volume rendering is done by averaging samples around the current fragment, which are taken in a regular grid. Depending on the distance to the focal plane the radius of confusion increases, therefore more samples are averaged.
Technology
We implemented the visualization with HTML, CSS and Javascript. Further we used Webgl in combination with the Three.js library for the rendering. For loading volume data in the NRRD file format, we used sample code from a THREE.js volume rendering sample.
https://developer.mozilla.org/de/docs/Web/API/WebGL_API
https://threejs.org/
https://threejs.org/examples/webgl2_materials_texture3d.html
Documentation
We used JSDoc to create the documentation. The UI allows customization of the dataset and transfer function used, as well as focal plane distance, the strength of the DOF effect and the ISO-threshold.
Dataset
The web application includes 6 different open scientific volume datasets.
Datasets: Aneurism, Stent, Skull, Engine, Boston Teapot and Lobster